<template>
  <v-container>
    <v-row>
      <v-col cols="12" class="d-flex justify-end">
        <v-btn color="error" @click="logout">退出登录</v-btn>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12" md="6">
        <v-card>
          <v-card-title>会议统计</v-card-title>
          <v-card-text>
            <div>会议数：{{ stats.meetingCount }}</div>
            <div>用户数：{{ stats.userCount }}</div>
            <div>会议室数：{{ stats.roomCount }}</div>
            <div>参会人数：{{ stats.attendeeCount }}</div>
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="6">
        <v-card>
          <v-card-title>报表导出</v-card-title>
          <v-card-text>
            <v-btn color="primary" @click="exportReport">导出Excel报表</v-btn>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12" md="6">
        <v-card>
          <v-card-title>Kafka 状态</v-card-title>
          <v-card-text>
            <vue-json-pretty :data="kafkaStatusObj" />
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12" md="6">
        <v-card>
          <v-card-title>Redis 状态</v-card-title>
          <v-card-text>
            <vue-json-pretty :data="redisStatusObj" />
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-card>
          <v-card-title>
            Redis 详细信息
            <v-spacer></v-spacer>
            <v-btn color="primary" @click="loadRedisDetails" :loading="loadingRedisDetails">
              刷新
            </v-btn>
          </v-card-title>
          <v-card-text>
            <div v-if="redisDetails.length === 0" class="text-center pa-4">
              <v-progress-circular v-if="loadingRedisDetails" indeterminate></v-progress-circular>
              <div v-else>暂无Redis数据</div>
            </div>
            <div v-else>
              <v-expansion-panels>
                <v-expansion-panel v-for="(keyInfo, index) in redisDetails" :key="index">
                  <v-expansion-panel-title>
                    <div class="d-flex align-center">
                      <v-chip :color="getTypeColor(keyInfo.type)" size="small" class="mr-2">
                        {{ keyInfo.type }}
                      </v-chip>
                      <span class="font-weight-bold">{{ keyInfo.key }}</span>
                      <v-spacer></v-spacer>
                      <span class="text-caption">TTL: {{ keyInfo.ttl }}s | 大小: {{ keyInfo.size }}</span>
                    </div>
                  </v-expansion-panel-title>
                  <v-expansion-panel-text>
                    <div class="mb-2">
                      <strong>预览:</strong>
                      <vue-json-pretty :data="keyInfo.preview" :deep="2" />
                    </div>
                    <div>
                      <strong>完整值:</strong>
                      <vue-json-pretty :data="keyInfo.value" :deep="3" />
                    </div>
                  </v-expansion-panel-text>
                </v-expansion-panel>
              </v-expansion-panels>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import api from '../services/api.js'
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
export default {
  name: 'AdminDashboard',
  components: { VueJsonPretty },
  data() {
    return {
      stats: {},
      kafkaStatusObj: {},
      redisStatusObj: {},
      redisDetails: [],
      loadingRedisDetails: false
    }
  },
  async mounted() {
    const res = await api.adminStats()
    this.stats = res.data
    const kafka = await api.adminKafkaStatus()
    this.kafkaStatusObj = kafka.data
    const redis = await api.adminRedisStatus()
    this.redisStatusObj = redis.data
    await this.loadRedisDetails()
  },
  methods: {
    async exportReport() {
      const res = await api.adminExportReport()
      const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = 'meeting_report.xlsx'
      a.click()
      window.URL.revokeObjectURL(url)
    },
    async logout() {
      await api.adminLogout()
      this.$router.push('/admin/login')
    },
    async loadRedisDetails() {
      this.loadingRedisDetails = true
      try {
        const response = await api.getRedisDetails()
        this.redisDetails = response.data.keys || []
      } catch (error) {
        console.error('加载Redis详细信息失败:', error)
        this.redisDetails = []
      } finally {
        this.loadingRedisDetails = false
      }
    },
    getTypeColor(type) {
      const colors = {
        string: 'primary',
        hash: 'success',
        list: 'warning',
        set: 'info',
        zset: 'purple'
      }
      return colors[type] || 'grey'
    }
  }
}
</script>

<style scoped>
pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
}
</style>
